<template>
	<view class="balance">
		<view class="top">
			<text>账户余额(元)</text>
			<text>12.00</text>
		</view>
		<view class="item">
			<view class="item-l">
				<text>12月15日</text>
				<text>09:00:00</text>
			</view>
			<view class="item-r">
				<text class="txt1">+0.80</text>
				<text class="txt5">收益结算</text>
			</view>
		</view>
		<view class="item">
			<view class="item-l">
				<text>12月15日</text>
				<text>09:00:00</text>
			</view>
			<view class="item-r">
				<text class="txt2">-0.80</text>
				<text class="txt5">购物支出</text>
			</view>
		</view>
		<view class="item">
			<view class="item-l">
				<text>12月15日</text>
				<text>09:00:00</text>
			</view>
			<view class="item-r">
				<text class="txt2">-0.80</text>
				<text class="txt5">购物支出</text>
			</view>
			<view class="item-r">
				<text class="txt3">(12.80)</text>
				<text class="txt5">包含余额</text>
			</view>
		</view>
		<view class="item">
			<view class="item-l">
				<text>12月15日</text>
				<text>09:00:00</text>
			</view>
			<view class="item-r">
				<text class="txt2">-0.80</text>
				<text class="txt5">购物支出</text>
			</view>
			<view class="item-r">
				<text class="txt4">+(10500积分)</text>
				<text class="txt5">包含积分</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		}
	}
</script>

<style>
.balance {
	width: 100%;
	height: 100%;
	position: absolute;
	background-color: #f3f3f3;
	font-size: 26upx;
}
.top {
	width: 100%;
	height: 240upx;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background-color: #fff;
	margin-bottom: 20upx;
}
.top text:first-child {
	font-size: 24upx;
	margin-bottom: 20upx;
}
.top text:last-child {
	font-size: 60upx;
	color: #333;
	margin-bottom: 20upx;
}
.item {
	background-color: #fff;
	display: flex;
	height: 160upx;
	padding: 0 20upx;
}
.item .item-l {
	flex: 1;
	padding: 40upx 0;
}
.item .item-l text {
	display: block;
	line-height: 40upx;
}
.item .item-r {
	width: 200upx;
	text-align: right;
	padding: 30upx 0;
}
.item .item-r text:first-child {
	height: 62upx;
	display: inline-block;
	line-height: 62upx;
}
.item .item-r .txt1 {
	font-size: 48upx;
	color: #F52A4C;
}
.item .item-r .txt2 {
	font-size: 48upx;
	color: #22E080;
}
.item .item-r .txt3 {
	font-size: 36upx;
}
.item .item-r .txt4 {
	color: #A2A2A2;
	font-size: 24upx;
}
.item .item-r .txt5 {
	font-size: 24upx;
	display: block;
}
</style>
